<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>模板语法</title>
</head>
<body>
    <div id="app">
       <!-- 原始html -->
       <p>Using mustaches: {{ rawHtml }}</p>
       <p>using v-html directive:<span v-html="rawHtml"></span>  </p>
       <button v-bind:disabled="isButtonDisabled">button</button>
       <!-- 参数and缩写-->
       <br>
       <!-- 缩写 -->
       <a :href="url">aaaa</a>
       <br>
       <!-- 动态参数 -->
       <a :[key]="url">bbbb</a>

    </div>

    <script type="text/javascript">
    // 插入原始html
     var vm=new Vue({
         el:"#app",
         data:{
            rawHtml:'<span style="color: red">This should be red.</span>',
            isButtonDisabled:"dsad",
            key:"href",
            url:"http://www.baidu.com"
         }

     })
    
    </script>
    
    
</body>
</html>